<template>
  <div class="style-panel">
    <el-form label-position="top">
      <!-- 尺寸 -->
      <el-form-item label="尺寸">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-input-number
              v-model="localProps.width"
              :min="0"
              :step="1"
              placeholder="宽度"
              @change="handleChange"
            />
          </el-col>
          <el-col :span="12">
            <el-input-number
              v-model="localProps.height"
              :min="0"
              :step="1"
              placeholder="高度"
              @change="handleChange"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 边距 -->
      <el-form-item label="边距">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-input-number
              v-model="localProps.margin"
              :min="0"
              :step="1"
              placeholder="外边距"
              @change="handleChange"
            />
          </el-col>
          <el-col :span="12">
            <el-input-number
              v-model="localProps.padding"
              :min="0"
              :step="1"
              placeholder="内边距"
              @change="handleChange"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 颜色 -->
      <el-form-item label="颜色">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-color-picker
              v-model="localProps.color"
              show-alpha
              @change="handleChange"
            />
          </el-col>
          <el-col :span="12">
            <el-color-picker
              v-model="localProps.backgroundColor"
              show-alpha
              @change="handleChange"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <!-- 对齐方式 -->
      <el-form-item label="对齐">
        <el-radio-group v-model="localProps.textAlign" @change="handleChange">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="center">居中</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface StyleProps {
  width?: number
  height?: number
  margin?: number
  padding?: number
  color?: string
  backgroundColor?: string
  textAlign?: 'left' | 'center' | 'right'
}

const props = withDefaults(defineProps<{
  modelValue?: StyleProps
}>(), {
  modelValue: () => ({
    width: undefined,
    height: undefined,
    margin: undefined,
    padding: undefined,
    color: undefined,
    backgroundColor: undefined,
    textAlign: undefined
  })
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: StyleProps): void
}>()

// 本地状态
const localProps = ref<StyleProps>({ ...props.modelValue })

// 处理属性变化
const handleChange = () => {
  emit('update:modelValue', { ...localProps.value })
}

// 监听属性变化
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    localProps.value = { ...newVal }
  }
}, { deep: true })
</script>

<style lang="scss" scoped>
.style-panel {
  padding: 16px;

  :deep(.el-form-item) {
    margin-bottom: 16px;
  }

  :deep(.el-input-number) {
    width: 100%;
  }

  :deep(.el-color-picker) {
    width: 100%;
  }
}
</style> 